<template>
	<view class="tab_content">
		<view class="data-v-25ab68f6" style="position:relative;width:100%;height:660rpx;background-color:#000000;">
			<video id='video1' class="video data-v-25ab68f6" controls="true" enablePlayGesture="true" loop="true"
				objectFit="contain" pageGesture="true" playsinline="true" :poster="posterPath" showCenterPlayBtn="true"
				:src="videoPath" v-if="!rpeVisable"></video>
			<text class="data-v-25ab68f6"
				style="font-size:32rpx;position:absolute;top:60%;left:41.9%;color:#fff;">动作解说</text>
		</view>
		<view class="data-v-25ab68f6" style="display:flex;margin-top:20rpx;margin-left:30rpx;flex-direction:row;"
			v-if="subSport.length||circuitWeigthLiftTrainingSub.groups">
			<text class="data-v-25ab68f6"
				style="font-size:32rpx;color:#7a7a7a;margin-left:12rpx;margin-right:12rpx;">{{'正在进行第'+(subSportIndex+1||1)+'小组，共'+(subSport.length||circuitWeigthLiftTrainingSub.groups)+'小组'}}</text>
			<text class="data-v-25ab68f6" style="position:styck;font-size:32rpx;color:#7a7a7a;"
				v-if="!isCircuitWeightLiftTraining&&subSportIndex+1<subSport.length">{{'下一组：5kg'}}</text>
			<text class="data-v-25ab68f6" style="font-size:32rpx;color:#7a7a7a;"
				v-if="isCircuitWeightLiftTraining&&subSportIndex+1<circuitWeigthLiftTrainingSub.groups">
				{{'下一组：'+circuitWeigthLiftTrainingSub.groupsList[subSportIndex+1].value+'kg'}}
			</text>
		</view>
		<view class="countdown data-v-25ab68f6">
			<uni-countdown class="data-v-25ab68f6" ref="countdown" :fontSize="56" :second="second" :showDay="false"
				:start="countdownNumberStart" v-if="!isCircuitWeightLiftTraining"></uni-countdown>
			<view class="data-v-25ab68f6" v-if="isCircuitWeightLiftTraining">
				<text class="BebasNeueBold data-v-25ab68f6"
					style="font-size:86rpx;font-weight:bold;">{{times+'次/组'}}</text>
			</view>

			<view class="data-v-01f8e9c2"
				style="width:100%;margin-top:30rpx;align-items:center;justify-content:center;">
				<view class="item data-v-01f8e9c2" style="width:80%;" v-if="groupstype1">
					<view class="column_item data-v-01f8e9c2" style="width:38%;">
						<text class="text_title data-v-01f8e9c2">动作</text>
						<text class="text_content data-v-01f8e9c2">{{sportway}}</text>
					</view>
					<view class="line data-v-01f8e9c2"></view>
					<view class="column_item data-v-01f8e9c2" style="width:28%;">
						<text class="text_title data-v-01f8e9c2">组数</text>
						<view class="data-v-01f8e9c2">
							<text class="text_content BebasNeueBold data-v-01f8e9c2"
								style="color:#ff7063;">{{currentIndex}}</text>
							<text class="text_content BebasNeueBold data-v-01f8e9c2">{{'/'+groups}}</text>
						</view>
					</view>
					<view class="line data-v-01f8e9c2"></view>
					<view class="column_item data-v-01f8e9c2">
						<text class="text_title data-v-01f8e9c2">负荷</text>
						<text class="text_content BebasNeueBold data-v-01f8e9c2">{{load+'kg'}}</text>
					</view>
				</view>
				<view class="item data-v-01f8e9c2" style="width:60%;" v-if="groupstype2">
					<view class="column_item data-v-01f8e9c2" style="width:48%;">
						<text class="text_title data-v-01f8e9c2">坡度</text>
						<text class="text_content BebasNeueBold data-v-01f8e9c2">{{gradient+'°'}}</text>
					</view>
					<view class="line data-v-01f8e9c2"></view>
					<view class="column_item data-v-01f8e9c2" style="width:48%;">
						<text class="text_title data-v-01f8e9c2">速度</text>
						<text class="text_content BebasNeueBold data-v-01f8e9c2">{{speed+'km/h'}}</text>
					</view>
				</view>
				<view class="item data-v-01f8e9c2" style="width:25%;" v-if="groupstype3">
					<view class="column_item data-v-01f8e9c2">
						<text class="text_title data-v-01f8e9c2">负荷</text>
						<text class="text_content BebasNeueBold data-v-01f8e9c2">{{load+'w'}}</text>
					</view>
				</view>
				<view class="item data-v-01f8e9c2" style="width:48%;" v-if="groupstype4">
					<view class="column_item data-v-01f8e9c2" style="width:48%;">
						<text class="text_title data-v-01f8e9c2">组别</text>
						<text class="text_content BebasNeueBold data-v-01f8e9c2">{{groupsName}}</text>
					</view>
					<view class="line data-v-01f8e9c2"></view>
					<view class="column_item data-v-01f8e9c2">
						<text class="text_title data-v-01f8e9c2">负荷</text>
						<text class="text_content BebasNeueBold data-v-01f8e9c2">{{load}}</text>
					</view>
				</view>
			</view>


			<view class="data-v-25ab68f6" style="padding-top:50rpx;align-items:center;" v-if="!start_show"
				@click="startShow">
				<view class="data-v-25ab68f6" style="padding-top:50rpx;flex-direction:column;align-items:center;">
					<image class="icon_start data-v-25ab68f6" mode="widthFix"
						src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_countdown_start.png"></image>
					<text class="countdown_status_text data-v-25ab68f6">开始</text>
				</view>
			</view>
			<view class="data-v-25ab68f6" v-else
				style="margin-top:12rpx;padding-top:50rpx;justify-content:center;align-items:center;flex-direction:row;">
				<view class="data-v-25ab68f6" @click="firstClick" v-if="false"
					style="flex-direction:column;justify-content:center;align-items:center;margin-right:32rpx;">
					<image class="icon_small data-v-25ab68f6" mode="widthFix"
						src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_countdown_stop.png"></image>
					<text class="countdown_status_text data-v-25ab68f6" style="margin-top:20rpx;">终止</text>
				</view>
				<view class="data-v-25ab68f6" @click="secondClick"
					style="flex-direction:column;justify-content:center;align-items:center;margin-left:32rpx;">
					<image class="icon_start data-v-25ab68f6" mode="widthFix"
						src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_countdown_pause.png"></image>
					<text class="countdown_status_text data-v-25ab68f6">{{pauseOrContinue}}</text>
				</view>
				<view class="data-v-25ab68f6" @click="thirdClick"
					style="flex-direction:column;justify-content:center;align-items:center;margin-left:32rpx;">
					<image class="icon_start data-v-25ab68f6" mode="widthFix"
						src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_finish_sport.png"></image>
					<text class="countdown_status_text data-v-25ab68f6">下一步</text>
				</view>
			</view>
			<uni-popup backgroundColor="rgba(0,0,0,0.000)" class="data-v-25ab68f6" ref="popupTips" type="bottom">
				<view class="popup_view data-v-25ab68f6">
					<text class="popup_content data-v-25ab68f6">{{sportTips}}</text>
					<button class="popup_btn data-v-25ab68f6" type="warn">确定</button>
				</view>
			</uni-popup>
			<uni-popup backgroundColor="rgba(0,0,0,0.000)" class="data-v-25ab68f6" ref="popupNextSportTips"
				type="bottom">
				<view class="popup_view data-v-25ab68f6">
					<view class="data-v-25ab68f6">
						<text class="data-v-25ab68f6" style="font-size:28rpx;color:#3a3a3a;opacity:0.6;">组间休息</text>
					</view>
					<view class="comfirm_next_sport data-v-25ab68f6">
						<text class="data-v-25ab68f6" style="font-size:40rpx;color:#3a3a3a;">{{sportwayNext}}</text>
						<view class="comfirm_next_sport_tips data-v-25ab68f6">
							<text class="data-v-25ab68f6" style="font-size:30rpx;color:#EA3E3C;">点击开始下一项运动</text>
							<view class="comfirm_next_sport_tips_round data-v-25ab68f6"></view>
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup backgroundColor="rgba(0,0,0,0.000)" class="data-v-25ab68f6" ref="popupBackOrOver" type="bottom">
				<view class="popup_view data-v-25ab68f6">
					<view class="data-v-25ab68f6"
						style="width:85%;justify-content:center;align-items:center;margin-left:32rpx;margin-bottom:40rpx;flex-direction:row;margin-right:32rpx;">
						<text class="data-v-25ab68f6" style="font-size:36rpx;flex:1;">运动未完成，是否结束</text>
						<image class="data-v-25ab68f6" src="" style="width:50rpx;height:50rpx;"></image>
					</view>
					<view class="data-v-25ab68f6" style="flex-direction:row;">
						<button class="popup_btn1 data-v-25ab68f6" type="default">暂存运动</button>
						<button class="popup_btn1 data-v-25ab68f6" type="default">继续运动</button>
						<button class="popup_btn1 data-v-25ab68f6" type="default">下一步</button>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="cover_image data-v-25ab68f6" style="width:100%;height:100%;" v-if="sportStartCountdown">
			<cover-image class="cover_image data-v-25ab68f6" src=""></cover-image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				statusBarHeight: 0,
				navigationBarHeight: 0,
				navigationBarRight: 0,
				inputRateValue: "",
				ratingPerceivedExertion: 0,
				circuitWeigthLiftTrainingParam: "",
				videoPath: "http://qiniu.xumengte.com/static/sports.mp4",
				posterPath: "http://qiniu.xumengte.com/static/sports.mp4?vframe/jpg/offset/0",
				sportway: "坐姿下拉",
				sportwayNext: "运动",
				index: 0,
				time: 3,
				second: 200,
				startCount: false,
				start_show: false,
				sportStatusBeforeExit: false,
				pauseOrContinue: "暂停",
				countdownNumberStart: false,
				pressBackTime: 0,
				hasClickStart: false,
				subSport: [{}],
				subSportIndex: -1,
				sportTips: "",
				sportTimeTips: "00:00",
				startTime: "",
				rpeVisable: false,
				input_visable: false,
				subIndex: -1,
				isCircuitWeightLiftTraining: false,
				circuitWeigthLiftTrainingSub: {
					groups: 6,
					groupsList: [{
						value: 10
					}, {
						value: 20
					}, {
						value: 30
					}, {
						value: 20
					}, {
						value: 10
					}, {
						value: 10
					}]
				},
				currentTimes: 0,
				times: "8~12",
				timer: null,
				timer2: null,
				recordTimeSeconds: 0,
				sportStartCountdown: false,
				enforcedFinishSport: false,
				sportRealTimes: [],
				isCountDownTimesStart: false,
				waitTime: 10,
				circuitWeigthLiftTrainingWaitTime: 180,
				costTimeList: [],
				costTime: 0,
				costTimeTimer: null,
				popupNextSportTipsisShow: false,
				currentSaveInfo: {},
				groupsName: "下拉",
				groupstype1: true,
				groupstype2: false,
				groupstype3: false,
				groupstype4: false,
				groups: 0,
				load: 0,
				gradient: 0,
				speed: 0,

			}
		},
		onLoad() {

		},
		onReady() {
			this.context = uni.createVideoContext("video1", this);
		},
		methods: {
			startShow() {
				console.log('startShow')
				this.start_show = true;
				this.context.play();
				this.countdownNumberStart = true;
			},
			firstClick() {
				console.log('firstClick')
			},
			secondClick() {
				console.log('secondClick')
				this.start_show = false;
				this.context.pause();
			},
			thirdClick() {
				console.log('thirdClick')
			}
		}
	}
</script>

<style>
	page.data-v-25ab68f6 {
		min-height: 100%;
		width: 100%;
	}

	page.data-v-25ab68f6,
	view.data-v-25ab68f6 {
		display: flex;
	}

	.BebasNeueBold.data-v-25ab68f6 {
		font-family: BebasNeueBold;
	}

	.video.data-v-25ab68f6 {
		bottom: 0rpx;
		height: 660rpx;
		position: absolute;
		right: 0rpx;
		width: 100%;
	}

	.tab_content.data-v-25ab68f6 {
		background-color: #fff;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	.status_bar.data-v-25ab68f6 {
		background-color: #fff;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.title_nav.data-v-25ab68f6 {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: nowrap;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.view_back.data-v-25ab68f6 {
		align-items: center;
		display: flex;
		justify-content: center;
		width: 80rpx;
	}

	.text_title.data-v-25ab68f6 {
		flex: 1;
		font-size: 40rpx;
	}

	.text_title1.data-v-25ab68f6 {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
	}

	.view_back.data-v-25ab68f6:active {
		background-color: #eee;
	}

	.icon_back.data-v-25ab68f6 {
		height: 60rpx;
		width: 60rpx;
	}

	.countdown_text.data-v-25ab68f6 {
		color: #7a7a7a;
		font-size: 40rpx;
	}

	.icon_time.data-v-25ab68f6 {
		height: 30rpx;
		margin-right: 12rpx;
		width: 30rpx;
	}

	.countdown.data-v-25ab68f6 {
		align-items: center;
		flex: 1;
		flex-direction: column;
		padding-bottom: 50rpx;
		padding-top: 30rpx;
	}

	.icon_start.data-v-25ab68f6 {
		height: 120rpx;
		width: 120rpx;
	}

	.icon_start.data-v-25ab68f6:active {
		background-color: #eee;
	}

	.icon_small.data-v-25ab68f6 {
		height: 120rpx;
		width: 120rpx;
	}

	.icon_small.data-v-25ab68f6:active {
		background-color: #eee;
	}

	.countdown_status_text.data-v-25ab68f6 {
		color: rgba(0, 0, 0, 0.522);
		font-size: 32rpx;
		margin-top: 18rpx;
	}

	.popup_view.data-v-25ab68f6 {
		background: #fff;
		border-radius: 20rpx;
		flex: 1;
		flex-direction: column;
		margin: 32rpx;
		padding-bottom: 32rpx;
		padding-top: 44rpx;
	}

	.popup_btn.data-v-25ab68f6,
	.popup_view.data-v-25ab68f6 {
		align-items: center;
		display: flex;
	}

	.popup_btn.data-v-25ab68f6 {
		background-color: #ef4141;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 80rpx;
		justify-content: center;
		margin-left: 32rpx;
		margin-right: 30rpx;
		margin-top: 40rpx;
		width: 268rpx;
	}

	.cover_image.data-v-25ab68f6 {
		align-items: center;
		height: 480rpx;
		justify-content: center;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 230rpx;
	}

	.cover_image.add-width.data-v-25ab68f6 {
		width: 560rpx;
	}

	.comfirm_next_sport.data-v-25ab68f6 {
		background-color: #f7f7f7;
		border-radius: 24rpx;
		flex-direction: column;
		margin-top: 40rpx;
		padding: 30rpx;
		width: 80%;
	}

	.comfirm_next_sport .comfirm_next_sport_tips.data-v-25ab68f6 {
		margin-top: 16rpx;
	}

	.comfirm_next_sport .comfirm_next_sport_tips .comfirm_next_sport_tips_round.data-v-25ab68f6 {
		align-items: center;
		background-color: #ea3e3c;
		border-radius: 50%;
		color: #fff;
		display: -webkit-inline-flex;
		display: inline-flex;
		height: 40rpx;
		justify-content: center;
		margin-left: 20rpx;
		width: 40rpx;
	}

	.comfirm_next_sport .comfirm_next_sport_tips .comfirm_next_sport_tips_round.data-v-25ab68f6:before {
		border: 3rpx solid #fff;
		border-width: 3rpx 3rpx 0 0;
		content: "";
		display: block;
		height: 14rpx;
		margin-left: -7rpx;
		transform: rotate(45deg);
		width: 14rpx;
	}

	.comfirm_next_sport.data-v-25ab68f6 :active {
		background-color: #eee;
	}

	.popup_btn1.data-v-25ab68f6::after {
		display: none;
	}

	.popup_btn1.data-v-25ab68f6:active {
		background-color: #eee;
	}

	.popup_btn1.data-v-25ab68f6 {
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 50rpx;
		display: flex;
		font-size: 32rpx;
		height: 80rpx;
		justify-content: center;
		margin-top: 40rpx;
		width: 200rpx;
	}

	.popup_btn1.data-v-25ab68f6:nth-child(2) {
		margin: 40rpx 20rpx 0rpx;
	}

	.item.data-v-01f8e9c2,
	view.data-v-01f8e9c2 {
		display: flex;
	}

	.item.data-v-01f8e9c2 {
		align-items: center;
		background-color: #f7f7f7;
		border-radius: 16rpx;
		flex-direction: row;
		justify-content: center;
		padding: 24rpx;
	}

	.column_item.data-v-01f8e9c2 {
		display: flex;
		flex-direction: column;
		width: 33%;
	}

	.text_title.data-v-01f8e9c2 {
		color: hsla(0, 0%, 48%, 0.6);
		font-size: 26rpx;
	}

	.text_content.data-v-01f8e9c2 {
		color: #333;
		font-size: 48rpx;
		margin-top: 12rpx;
	}

	.line.data-v-01f8e9c2 {
		background-color: #dbdbdb;
		height: 70rpx;
		margin-right: 26rpx;
		width: 2rpx;
	}
</style>